<template>
  <svg class="icon-font" aria-hidden="true" :style="style">
    <use :xlink:href="`#icon-${type}`"></use>
  </svg>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  type: {
    type: String,
    required: true
  },
  size: {
    type: [Number, String],
    default: 16
  },
  color: {
    type: String,
    default: ''
  }
});

const style = computed(() => {
  return {
    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,
    color: props.color,
    width: '1em',
    height: '1em',
    verticalAlign: '-0.15em',
    fill: 'currentColor',
    overflow: 'hidden'
  };
});
</script>

<style scoped>
.icon-font {
  display: inline-block;
}
</style> 